<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>
      Network | Basic Usage | ESNext Build
    </title>

    <style type="text/css">
      html,
      body,
      #mynetwork {
        margin: 0px;
        padding: 0px;
      }

      #mynetwork {
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 50%;
        min-height: 100vh;
        border-right: 1px solid lightgray;
        background: white;
      }

      #text {
        position: absolute;
        left: 50%;
        padding: 1em;
      }

      #title {
        margin-bottom: 5em;
      }
    </style>
  </head>

  <body>
    <div id="text">
      <div id="title">
        <h1>Vis Network</h1>
        <h2>Basic Usage</h2>
        <h3>ESNext Build</h3>
      </div>

      <p>
        Create a simple network with some nodes and edges.
      </p>

      <p>
        ESNext build is designed to be used in combination with bundlers and
        transpillers. It doesn't bundle any dependencies or polyfills, you have
        to provide them yourself. This is handy if you already have polyfills
        and potentionally also the same dependencies in your app, you can use
        them for Vis projects too instead of having multiple copies of the same
        polyfills in your bundle from different packages.
      </p>

      <p>
        Otherwise it can be used the same way as the peer build.
      </p>

      <h4>When to use</h4>
      <p>
        When you need to optimize bundle size or finer control over what gets
        loaded.
      </p>

      <h4>Content</h4>
      <ul>
        <li>
          Vis Network
          <ul>
            <li>Network"</li>
            <li>NetworkDOTParser"</li>
            <li>NetworkImages"</li>
            <li>NetworkOptions"</li>
            <li>networkGephiParser"</li>
            <li>parseDOTNetwork"</li>
            <li>parseGephiNetwork"</li>
          </ul>
        </li>
      </ul>

      <h4>How to use</h4>

      <h5>Browser UMD</h5>
      <p>
        Even though UMD builds are a part of the package, this is very unlikely
        to work. You generally need some polyfills and transpilation even in the
        most modern browsers.
      </p>

      <h5>Bundled ESM</h5>
      <pre><code>
// all peer dependencies have to be installed
// even if you don't import them yourself
import { DataSet } from "vis-data/esnext";
import { Network } from "vis-network/esnext";
import "vis-network/styles/vis-network.css";

// create an array with nodes
const nodes = new DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" }
]);

// create an array with edges
const edges = new DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 }
]);

// create a network
const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges
};
const options = {};
const network = new Network(container, data, options);
      </code></pre>

      The code above has to be injected into a page which contains an element
      with <code>mynetwork</code> id. Like for example:
      <pre><code>
&lt;div id=&quot;mynetwork&quot;&gt;&lt;/div&gt;
      </code></pre>
    </div>

    <div id="mynetwork">N/A</div>
  </body>
</html>
